<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <title>订单详情</title>
    <link rel="stylesheet" href="__CSS__/bootstrap.min.css">
    <link rel="stylesheet" href="__CSS__/hdw.css">
    <script src="__JS__/libs/jquery-2.0.2.min.js"></script>
    <script src="__JS__/bootstrap/bootstrap.min.js"></script>
    <style>
        html{
            font-size: 12px;
        }
        body{
            /*background: #F0F2F5;*/
        }
        .navbar{
            margin-bottom: 0;
        }
        .navbar-fixed-top{
            background: #F8F8F8;
            height:44px;
            line-height: 44px;
            text-align: center;
        }
        .navbar-fixed-top p{
            font-size: 1.4rem;
        }
        .header-icon{
            position: absolute;
            width: 40px;
            height: 44px;
        }
        .header-icon a{
            width: 20px;
            height: 20px;
            display: block;
            background: url(__IMG__/infos-sprites.png) no-repeat -20px 0;
            background-size: 200px 200px;
            margin: 12px 0 0 10px;
        }
        .section1{
            margin-top:20px;
            /*background: #fff;*/
            /*color:#fff;*/
        }
        .outerCircle{
            display: inline-block;
            position: absolute;
            height: 24px;
            width: 24px;
            border: 1px solid #ddd;
            border-radius: 50%;
        }
        .process .circle{
            display: inline-block;
            position: absolute;
            top: 3px;
            left: 3px;
            height: 16px;
            width: 16px;
            border-radius: 50%;
            background: #EEEEEE;
        }

        .circle span{
            display: inline-block;
            position: absolute;
            /*top: 3px;
            left: 3px;*/
            height: 16px;
            width: 16px;
            border-radius: 50%;
            background: #EEEEEE;
            text-align: center;
            /*display: none;*/
        }

        .process .left{
            display: inline-block;
            position: relative;
            top:0;
            height:3px;
            width:calc(100% - 24px) ;
            background: #EEEEEE;
        }
        .process div[class*="col-"]{
            padding: 0;
        }
        .process .one {
            display: inline-block;
            height: 24px;
            width: 24px;
            border: 1px solid blanchedalmond;
            border-radius: 50%;
        }
        .one .circleS{
            position: relative;
            top: 3px;
            left: 3px;

        }
        .process .one b{
            background:blanchedalmond;
            height: 16px;
            line-height: 16px;
            width: 16px;
            text-align: center;
            display: inline-block;
            border-radius: 50%;
            position: absolute;
            top: 0;
            left: 0;
        }
        .left b{
            position: absolute;
            top:0;
            left:0;
            height: 3px;
            width:0;
        }
        .left1 b{
            /*background: yellow;*/
            background: -webkit-linear-gradient(#fff, #FFFD00); /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(#fff, #FFFD00); /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(#fff, #FFFD00); /* Firefox 3.6 - 15 */
            background: linear-gradient(to right, #fff, #FFFD00); /* 标准的语法（必须放在最后） */
        }
        .left2 b{
            /*background: #FFD300;*/
            background: -webkit-linear-gradient(yellow, #99CC00); /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(yellow, #99CC00); /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(yellow, #99CC00); /* Firefox 3.6 - 15 */
            background: linear-gradient(to right, #fff, #99CC00); /* 标准的语法（必须放在最后） */
        }
        .left3 b{
            /*background:orange;*/
            background: -webkit-linear-gradient(#fff, #DE75E4); /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(#fff, #DE75E4); /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(#fff, #DE75E4); /* Firefox 3.6 - 15 */
            background: linear-gradient(to right, #fff, #DE75E4); /* 标准的语法（必须放在最后） */
        }

        .left4 b{
            /*background:coral;*/
            background: -webkit-linear-gradient(#fff , #FF7500); /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(#fff , #FF7500); /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(#fff , #FF7500); /* Firefox 3.6 - 15 */
            background: linear-gradient(to right, #fff , #FF7500); /* 标准的语法（必须放在最后） */
        }
        .left5 b{
            /*background: orangered;*/
            background: -webkit-linear-gradient(#FF7500, #FF0500); /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(#FF7500, #FF0500); /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(#FF7500, #FF0500); /* Firefox 3.6 - 15 */
            background: linear-gradient(to right, #FF7500, #FF0500); /* 标准的语法（必须放在最后） */
        }
        .processBar1 span.active{
            background: #FFFD00;
        }
        .processBar2 span.active{
            background: #99CC00;

        }
        .processBar3 span.active{
            background:#DE75E4;

        }

        .processBar4 span.active{
            background:#FF7500;

        }
        .processBar5 span.active{
            background:#FF0500;

        }
        .processBar1 .outerCircle.active{
            border:1px solid #FFFD00;
        }
        .processBar2 .outerCircle.active{
            border:1px solid #99CC00;
        }
        .processBar3 .outerCircle.active{
            border:1px solid #DE75E4;
        }
        .processBar4 .outerCircle.active{
            border:1px solid #FF7500;
        }
        .processBar5 .outerCircle.active{
            border:1px solid #FF0500;
        }
        .color{
            margin-top: 20px;
        }
        .one{
            margin-bottom: 10px;
        }
        .one input,.one textarea{
            border: 1px solid #ddd;
            border-radius: 3px;
            width: calc(90% - 60px);
        }
        .one input{
            height: 30px;
            line-height: 30px;
        }
        .one label{
            width: 60px;
            text-align: right;
        }
        .password{
            overflow: hidden;
        }
        .password label{
            float:left;
        }
        .password textarea{
            float:left;
        }
    </style>
</head>
<body>
<section class="section1">
    <div class="container">
        <div class="row row1">
            <div class="col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1">
                <div class="one">
                    <label for="username">订单号：</label>
                    <input type="text" id="dev_name" name='name' value="20170322191919" disabled class="a1_l" />
                </div>
                <div class="one">
                    <label for="passwowd">业务名：</label>
                    <input type="text" id="dcode" name="devcode" value="空调修理" disabled class="a1_l" />
                </div>
                <div class="one">
                    <label for="passwords">时间：</label>
                    <input type="text" id="d_address" name='address' disabled value="2017-03-22 19:20:20" class="a1_l" />
                </div>
                <div class="one">
                    <label for="passwords">状态：</label>
                    <input type="text" value="完成" disabled />
                </div>
                <div class="one password">
                    <label for="passwords">备注：</label>
                    <textarea rows="5" cols="24" disabled>请尽快</textarea>
                </div>
                <div class="one">
                    <input type="text" class="processVal" hidden="hidden" value="5"  />
                </div>
            </div>
        </div>
        <div class="row row1 color">
            <div class="col-sm-12 col-xs-12  process">
                <div class="col-sm-1 col-xs-1 " style="text-align: right;">
                    <div class="one">
                        <div class="circleS"><b></b></div>
                    </div>
                </div>
                <div class="col-sm-2 col-xs-2 processBar processBar1">

                    <div class="left left1"><b></b></div>
                    <div class="outerCircle outerCircle1">
                        <div class="circle"><span>1</span></div>
                    </div>

                </div>
                <div class="col-sm-2 col-xs-2 processBar processBar2">
                    <div class="left left2"><b></b></div>
                    <div class="outerCircle outerCircle2">
                        <div class="circle"><span>2</span></div>
                    </div>
                </div>
                <div class="col-sm-2 col-xs-2 processBar processBar3">
                    <div class="left left3"><b></b></div>
                    <div class="outerCircle outerCircle3">
                        <div class="circle"><span>3</span></div>
                    </div>
                </div>
                <div class="col-sm-2 col-xs-2 processBar processBar4">
                    <div class="left left4"><b></b></div>
                    <div class="outerCircle outerCircle4">
                        <div class="circle"><span>4</span></div>
                    </div>
                </div>
                <div class="col-sm-2 col-xs-2 processBar processBar5">
                    <div class="left left5"><b></b></div>
                    <div class="outerCircle outerCircle5">
                        <div class="circle"><span>5</span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<script>
    $(function(){
        var i=$(".processVal").val();
        for(var j=i;j>=2;j--){
            console.log("1");
            $(".processBar").eq((j-2)).find("b").css("width","100%");
            $(".processBar").eq((j-2)).find("span").addClass("active");
            $(".processBar").eq((j-2)).find(".outerCircle").addClass("active");
        }

        $(".processBar").eq((i-1)).find("b").animate({width:"100%"},function(){
            $(".processBar").eq((i-1)).find("span").addClass("active");
            $(".processBar").eq((i-1)).find(".outerCircle").addClass("active");
        });

    })

</script>
</body>
</html>